<!--  -->
<template>
  <div id="MerchandisePrizeDrawDetail" class="bg-img" :style="{ backgroundImage: 'url(' + imgPath + 'merchandise-prize-draw/product-lottery-background.png)' }">
    <c-title :text="plugin_name"></c-title>
    <div class="f-bold f-18 color-ffffff gt">{{ info.goods && info.goods.title }}</div>

    <div class="goods-prize-draw border-radius-8 flex t-l">
      <div class="status-tag f-13" :class="`status-tag-${info.active_status}`">{{ active_status_name }}</div>
      <div class="f-grow-1 padding-bottom-10">
        <div class="f-13">活动参与进度：{{ info.count_order }}/{{ order_num }}</div>
        <div class="margin-top-4" style="width: 80%;">
          <van-progress :percentage="percentage" :show-pivot="false" :stroke-width="8" color="#FF3D3D" track-color="#FFA08D" />
        </div>
      </div>

      <div>
        <img style="width: 96px; height: auto;" :src="`${imgPath}merchandise-prize-draw/lottery.png`" alt="" />
      </div>
    </div>

    <div class="goods-prize-draw padding-10 border-radius-8 t-c flex-column flex-j-c flex-a-c" v-if="info.active_status == 2" >
      <div class="bg-img-2" v-if="info.prize_msg && info.prize_msg.length > 0">
        <img style="width: 100%; height: auto;" :src="`${imgPath}merchandise-prize-draw/lottery-name.png`" alt="" />
      </div>
      <div v-if="info.prize_msg && info.prize_msg.length == 0" class="f-28 f-bold" style="width: 100%;padding: 24px 0;z-index: 9;">很遗憾，未抽中</div>
      <div style="width: 100%;z-index: 9;" v-if="info.prize_msg && info.prize_msg.length > 0">
        <div class="f-18 f-bold">恭喜您中奖啦！</div>
        <div class="flex-j-c flex-column flex-a-c">
          <div v-for="(item,index) in info.prize_msg" :key="index" class="flex-a-c margin-top-4" style="align-items: baseline;">
            <div class="f-28 f-bold color-FF2D43">{{ item.prize_name }}</div>
            <div class="f-15 color-000000">（{{ item.prize_count }}单）</div>
          </div>
        </div>
      </div>
    </div>

    <div class="box-main border-radius-8 flex-column bg-fff" v-if="info.prize_member && info.prize_member.length > 0">
      <div class="f-15 f-bold padding-bottom-10">中奖会员</div>
      <div :class="[isfold ? 'unfold' : 'fold']">
        <div class="padding-10 bg-f5f5f5 flex border-radius-8 margin-top-8" style="flex-shrink: 0;" v-for="(item, index) in info.prize_member" :key="index">
          <div class="f-13 f-bold margin-right-20">{{ item.name }}</div>
          <div class="flex-column f-grow-1">
            <div class="flex-a-c" :class="{ 'margin-top-8': ind != 0 }" v-for="(child, ind) in item.value" :key="child.uid">
              <img style="width: 20px;height: auto;" class="margin-right-6 border-radius-8" :src="child.avatar_image" alt="" />
              <div class="f-13">{{ child.mobile }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-fff padding-10" @click.stop="changeFold">
        {{ isfold ? "收起" : "展开" }}
        <div :class="isfold?'rotate_box':'fold_rotate_box'"><i class="iconfont icon-member-bottom"></i></div>
      </div>
    </div>

    <div class="box-main border-radius-8 flex-column bg-fff" v-if="info.prize_data && info.prize_data.prize_name.length > 0">
      <div class="f-15 f-bold padding-bottom-10">中奖奖品</div>
      <div class="padding-10 flex" v-for="(item, index) in info.prize_data.prize_name" :key="index">
        <div class="f-13 f-bold margin-right-20">{{ item.name }}</div>
        <div class="flex-column f-grow-1 t-l">{{ item.value }}</div>
      </div>
    </div>

    <div class="box-main border-radius-8 flex-column bg-fff">
      <div class="f-15 f-bold padding-bottom-10">中奖规则</div>
      <div class="bg-FBCFCF border-radius-8">
        <img style="width: 100%;" :src="info.prize_data && info.prize_data.prize_img" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgPath: "",
      info: {},
      plugin_name: "",
      percentage: 100,
      order_num: 0,
      active_status_name: "", //0未开奖，1开奖中，2已开奖
      isfold: false
    };
  },

  activated() {
    this.getData();
  },

  components: {},

  computed: {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get(
        "plugin.merchandise-prize-draw.frontend.index.get-lottery",
        {
          goods_id: this.$route.params.id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.imgPath = this.$store.state.imgPath;
      this.plugin_name = data.plugin_name;
      this.fun.setWXTitle(data.plugin_name);
      this.info = data;
      this.order_num = this.info.prize_data.order_num;
      this.percentage = (Number(this.info.count_order) / Number(this.order_num)) * 100;
      //active_status,0未开奖，1开奖中，2已开奖
      this.active_status_name = this.info.active_status == 0 ? "未开奖" : this.info.active_status == 1 ? "开奖中" : "已开奖";
    },
    changeFold() {
      // if (!this.isfold) {
      //   this.$refs.fp_main_height.style.height = this.$refs.fp__main_child_h.offsetHeight + 'px';
      // } else {
      //   this.$refs.fp_main_height.style.height = '2.5rem';
      // }

      this.isfold = !this.isfold;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#MerchandisePrizeDrawDetail {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-color: #ff2d43;
}
.bg-img {
  background-position: top 40px right 0;
  background-size: 100%;
  background-repeat: no-repeat;
}
.bg-FBCFCF {
  background: #fbcfcf;
}
.color-FF2D43 {
  color: #ff2d43;
}
.gt {
  margin: 1.875rem;
}
.goods-prize-draw {
  position: relative;
  margin: 0 0.625rem 0.625rem 0.625rem;
  padding: 0.625rem;
  padding-bottom: 0;
  background: linear-gradient(180deg, #ffbebe 0%, #ffffff 100%);
  border: 2px solid #ffffff;
  color: #00001c;
  align-items: flex-end;
}
.bg-img-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.goods-prize-draw .status-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.5rem;
  border-radius: 8px 0px 8px 0px;
  color: #fff;
  line-height: 1.25rem;
}
.status-tag-0 {
  background: #ff3d3d;
}
.status-tag-1 {
  background: #f99b20;
}
.status-tag-2 {
  background: #07b11e;
}
.box-main {
  margin: 0 0.625rem 0.625rem 0.625rem;
  padding: 0.875rem;
}
img {
  display: block;
  margin: 0;
}
.margin-right-20 {
  margin-right: 1.25rem;
}
.fold {
  height: 7.5rem;
  overflow: hidden;
}

.unfold {
  height: auto;
}
.rotate_box {
  display: inline-block;
  transform: rotate(180deg);
}

.fold_rotate_box {
  display: inline-block;
  transform: rotate(0deg);
}
</style>
